CSS ಚಲನಾ ಪಥ ವಿಭಾಗಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ಪಥದ ಭಾಗದ ಅನಿಮೇಷನ್‌ಗೆ ಆಳವಾದ ಧುಮುಕು

ವೆಬ್ ವಿನ್ಯಾಸ ಮತ್ತು ಅಭಿವೃದ್ಧಿಯ ನಿರಂತರ ವಿಕಾಸದ ಭೂದೃಶ್ಯದಲ್ಲಿ, ಚಲನೆಯು ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ನಿರ್ಣಾಯಕ ಭಾಷೆಯಾಗಿದೆ. ಇದು ಗಮನವನ್ನು ಸೆಳೆಯುತ್ತದೆ, ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಸ್ಥಿರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳು ಮಾಡಲು ಸಾಧ್ಯವಾಗದ ರೀತಿಯಲ್ಲಿ ಕಥೆಗಳನ್ನು ಹೇಳುತ್ತದೆ. ವರ್ಷಗಳಿಂದ, ಸಂಕೀರ್ಣ ಚಲನೆಗೆ ಭಾರೀ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳು ಅಥವಾ ಮೀಸಲಾದ ಅನಿಮೇಷನ್ ಪರಿಕರಗಳು ಬೇಕಾಗಿದ್ದವು. ಆದಾಗ್ಯೂ, CSS ಚಲನಾ ಪಥ ಮಾಡ್ಯೂಲ್ ಶಕ್ತಿಯುತ, ಸ್ಥಳೀಯ ಪರಿಹಾರವಾಗಿ ಹೊರಹೊಮ್ಮಿದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಕಸ್ಟಮ್-ವ್ಯಾಖ್ಯಾನಿತ ಪಥಗಳ ಉದ್ದಕ್ಕೂ ಅಂಶಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆ, ಘೋಷಣಾತ್ಮಕ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಗೇಮ್-ಚೇಂಜರ್ ಆಗಿದೆ.

ಹೆಚ್ಚಿನ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ಚಲನಾ ಪಥವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಾರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ ಒಂದು ಅಂಶವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವ ಮೂಲಕ ಪರಿಚಯಿಸುತ್ತವೆ. ಆದರೆ ನಿಮ್ಮ ಸೃಜನಶೀಲ ದೃಷ್ಟಿಗೆ ಹೆಚ್ಚಿನ ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳು ಬೇಕಾದಾಗ ಏನಾಗುತ್ತದೆ? ಒಂದು ಸಂಕೀರ್ಣ ಆಕಾರದ ಒಂದು ಕರ್ವ್ ಉದ್ದಕ್ಕೂ ವಸ್ತುವನ್ನು ಚಲಿಸುವಂತೆ ಮಾಡಲು, ವಿರಾಮಗೊಳಿಸಲು ಮತ್ತು ನಂತರ ಬೇರೆ ವಿಭಾಗದ ಉದ್ದಕ್ಕೂ ಮುಂದುವರಿಯಲು ನೀವು ಬಯಸಿದರೆ ಏನು ಮಾಡಬೇಕು? ನಿಜವಾದ ಪಾಂಡಿತ್ಯ ಇರುವುದೇ ಇಲ್ಲಿ: ಕೇವಲ ಪಥವನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಪ್ರಯಾಣದ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳನ್ನು ನಿಯಂತ್ರಿಸುವಲ್ಲಿ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮೀರಲು ಬಯಸುವ ಜಗತ್ತಿನಾದ್ಯಂತದ ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ವಿನ್ಯಾಸಕಾರರಿಗಾಗಿ ಆಗಿದೆ. CSS ಚಲನಾ ಪಥದ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಗಳ ಉದ್ದಕ್ಕೂ ಅಂಶಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ತಂತ್ರಗಳನ್ನು ನಾವು ವಿಶ್ಲೇಷಿಸುತ್ತೇವೆ, ಒಂದೇ ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಾಲು ಇಲ್ಲದೆ ಹೊಸ ಮಟ್ಟದ ನೃತ್ಯ ಸಂಯೋಜನೆ ಮತ್ತು ಅಭಿವ್ಯಕ್ತಿಶೀಲ ವೆಬ್ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತೇವೆ.

ದಿ ಫೌಂಡೇಶನ್ಸ್: CSS ಚಲನಾ ಪಥದ ತ್ವರಿತ ಪ್ರವಾಸ

ನಾವು ವಿಭಾಗಗಳನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೊದಲು, ಚಲನಾ ಪಥವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ನಮಗೆ ಗಟ್ಟಿಯಾದ ತಿಳುವಳಿಕೆ ಇರಬೇಕು. ನೀವು ಈಗಾಗಲೇ ಅವರೊಂದಿಗೆ ಪರಿಚಿತರಾಗಿದ್ದರೆ, ಇದನ್ನು ಸಂಕ್ಷಿಪ್ತ ರಿಫ್ರೆಶ್ ಎಂದು ಪರಿಗಣಿಸಿ; ನೀವು ಹೊಸಬರಾಗಿದ್ದರೆ, ಇದು ನಿಮ್ಮ ಅಗತ್ಯ ಆರಂಭಿಕ ಹಂತವಾಗಿದೆ.

ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳು

CSS ಚಲನಾ ಪಥದ ಹಂತ 1 ರ ವಿಶೇಷಣವು ಒಂದು ಅಂಶದ ಚಲನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ನಿಯಂತ್ರಿಸಲು ಒಟ್ಟಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಗುಣಲಕ್ಷಣಗಳ ಗುಂಪನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಅವುಗಳಲ್ಲಿ ಅತ್ಯಂತ ನಿರ್ಣಾಯಕವಾದವುಗಳು:

• offset-path: ಇದು ಮಾಡ್ಯೂಲ್‌ನ ಹೃದಯಭಾಗವಾಗಿದೆ. ಇದು ಅಂಶವು ಅನುಸರಿಸುವ ಜ್ಯಾಮಿತೀಯ ಪಥವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಶಕ್ತಿಯುತ ಮಾರ್ಗವೆಂದರೆ path() ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು, ಇದು SVG ಪಥದ ಡೇಟಾ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. ಇದರರ್ಥ ನೀವು ಯಾವುದೇ ವೆಕ್ಟರ್ ಗ್ರಾಫಿಕ್ಸ್ ಎಡಿಟರ್‌ನಲ್ಲಿ (ಇಲ್ಲಸ್ಟ್ರೇಟರ್, ಇಂಕ್‌ಸ್ಕೇಪ್ ಅಥವಾ ಫಿಗ್ಮಾದಂತೆ) ಸಂಕೀರ್ಣ ಪಥವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು, SVG ಪಥದ ಡೇಟಾವನ್ನು ನಕಲಿಸಬಹುದು ಮತ್ತು ಅದನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ CSS ಗೆ ಅಂಟಿಸಬಹುದು.
• offset-distance: ಇದನ್ನು ಅನಿಮೇಷನ್‌ಗಾಗಿ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ಎಂದು ಯೋಚಿಸಿ. ಇದು offset-path ಉದ್ದಕ್ಕೂ ಅಂಶದ ಸ್ಥಾನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. 0% ಮೌಲ್ಯವು ಪಥದ ಆರಂಭದಲ್ಲಿ ಅಂಶವನ್ನು ಇರಿಸುತ್ತದೆ, ಆದರೆ 100% ಅದನ್ನು ಕೊನೆಯಲ್ಲಿ ಇರಿಸುತ್ತದೆ. ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು ಚಲನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
• offset-rotate: ಪಥದಲ್ಲಿ ಚಲಿಸುವಾಗ ಈ ಗುಣಲಕ್ಷಣವು ಅಂಶದ ದೃಷ್ಟಿಕೋನವನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಅಂಶವು ತಿರುಗುವುದಿಲ್ಲ. ಅದನ್ನು auto ಗೆ ಹೊಂದಿಸುವುದರಿಂದ ಅಂಶದ ಆಧಾರ ರೇಖೆಯು ಪಥದ ದಿಕ್ಕಿಗೆ ತನ್ನನ್ನು ತಾನೇ ಓರಿಯಂಟ್ ಮಾಡಿಕೊಳ್ಳುತ್ತದೆ, ಇದು ರಸ್ತೆಯಲ್ಲಿರುವ ಕಾರುಗಳು ಅಥವಾ ಆಕಾಶದಲ್ಲಿರುವ ವಿಮಾನಗಳಂತಹ ವಿಷಯಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ. ಅಂಶವು ಪಥದ ದಿಕ್ಕಿಗೆ ಲಂಬವಾಗಿರುವಂತೆ ಮಾಡಲು ನೀವು auto 90deg ನಂತಹ ಕೋನವನ್ನು ಸಹ ಸೇರಿಸಬಹುದು.
• offset-anchor: ಅಂಶದ ಯಾವ ಬಿಂದುವು ಪಥಕ್ಕೆ ನಿಗದಿಪಡಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಇದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ auto ಆಗಿದೆ, ಇದು 50% 50% ಅಥವಾ ಅಂಶದ ಮಧ್ಯಭಾಗಕ್ಕೆ ಸಮಾನವಾಗಿರುತ್ತದೆ. ಅಂಶವು ತನ್ನ ಪಥಕ್ಕೆ ಹೇಗೆ "ಪಿನ್" ಆಗಿದೆ ಎಂಬುದನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಇತರ ನಿರ್ದೇಶಾಂಕಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, ಮೇಲಿನ ಎಡ ಮೂಲೆಯ 0% 0%) ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಸರಳ "ಪೂರ್ಣ-ಪಥ" ಅನಿಮೇಷನ್ ಉದಾಹರಣೆ

ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒಂದು ಶ್ರೇಷ್ಠ ಉದಾಹರಣೆಯೊಂದಿಗೆ ನೋಡೋಣ: ಸರಳವಾದ ವಕ್ರ ಪಥದ ಪ್ರಾರಂಭದಿಂದ ಅಂತ್ಯದವರೆಗೆ ವಸ್ತುವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು. ಇದು ವಿಭಾಗದ ನಿಯಂತ್ರಣಕ್ಕೆ ಧುಮುಕುವ ಮೊದಲು ನಮ್ಮ ಆಧಾರ ರೇಖೆಯನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ.

            
<!-- HTML Structure -->
<div class="scene">
  <div class="dot"></div>
</div>

<style>
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot {
    width: 20px;
    height: 20px;
    background-color: dodgerblue;
    border-radius: 50%;
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    animation: move-along-full-path 4s infinite linear;
  }

  @keyframes move-along-full-path {
    from {
      offset-distance: 0%;
    }
    to {
      offset-distance: 100%;
    }
  }
</style>

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .dot ಅಂಶಕ್ಕೆ ವಕ್ರವಾದ offset-path ಅನ್ನು ನಿಗದಿಪಡಿಸಲಾಗಿದೆ. ನಂತರ move-along-full-path ಅನಿಮೇಷನ್ ನಾಲ್ಕು ಸೆಕೆಂಡುಗಳಲ್ಲಿ offset-distance ಅನ್ನು 0% ರಿಂದ 100% ವರೆಗೆ ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಪ್ರಮಾಣಿತ, ಮೂಲಭೂತ ಬಳಕೆಯ ಪ್ರಕರಣವಾಗಿದೆ. ಆದರೆ ಈ ಸರಳ ಪ್ರಾರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ ಮಾದರಿಯಿಂದ ಹೊರಬರುವುದು ನಮ್ಮ ಗುರಿಯಾಗಿದೆ.

ಪ್ರಮುಖ ಸವಾಲು: ನಿರ್ದಿಷ್ಟ ಪಥದ ವಿಭಾಗವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ನೈಜ ಜಗತ್ತು ವಿರಳವಾಗಿ ಸರಳವಾದ A-to-Z ಪ್ರಯಾಣವಾಗಿದೆ. ನಗರದ ಸಾರ್ವಜನಿಕ ಸಾರಿಗೆ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿನ ಸಬ್‌ವೇ ನಕ್ಷೆಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು ಸಂಪೂರ್ಣ ನಗರ ಜಾಲದಾದ್ಯಂತ ರೈಲನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಬಯಸುವುದಿಲ್ಲ; ಎರಡು ನಿರ್ದಿಷ್ಟ ನಿಲ್ದಾಣಗಳ ನಡುವಿನ ಅದರ ಪ್ರಯಾಣವನ್ನು ನೀವು ತೋರಿಸಲು ಬಯಸುತ್ತೀರಿ. ಅಥವಾ ಸಂವಾದಾತ್ಮಕ ಉತ್ಪನ್ನ ಪ್ರವಾಸವನ್ನು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ನೀವು ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಸಾಧನದ ಪರದೆಯಿಂದ ಅದರ ಕ್ಯಾಮೆರಾ ಲೆನ್ಸ್‌ಗೆ ಸೆಳೆಯಲು ಬಯಸುತ್ತೀರಿ, ಅದು ಸಾಧನವನ್ನು ರೂಪಿಸುವ ಪೂರ್ವ-ನಿರ್ಧಾರಿತ ಪಥದ ಉದ್ದಕ್ಕೂ 20% ರಿಂದ 35% ರಷ್ಟು ಚಲಿಸುವುದನ್ನು ಪ್ರತಿನಿಧಿಸಬಹುದು.

ಈ ಸನ್ನಿವೇಶಗಳು ಕಣಕಣ ನಿಯಂತ್ರಣದ ಅಗತ್ಯವನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತವೆ. ನಮ್ಮ ಅನಿಮೇಷನ್‌ಗೆ ಹೇಳಲು ನಮಗೆ ಒಂದು ಮಾರ್ಗ ಬೇಕು:

• ಪಥದ ಉದ್ದಕ್ಕೂ ಅನಿಯಂತ್ರಿತ ಬಿಂದುವಿನಲ್ಲಿ ಪ್ರಾರಂಭಿಸಿ (ಉದಾ., 25%).
• ಮತ್ತೊಂದು ಅನಿಯಂತ್ರಿತ ಬಿಂದುವಿನಲ್ಲಿ ಕೊನೆಗೊಳ್ಳಿ (ಉದಾ., 80%).
• ನಮ್ಮ ಅನಿಮೇಷನ್‌ನ ಸಂಪೂರ್ಣ ಅವಧಿಯಲ್ಲಿ ಈ ಭಾಗಶಃ ಪ್ರಯಾಣವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.

ಇಲ್ಲಿ CSS ಕೀಫ್ರೇಮ್‌ಗಳ ಬಗ್ಗೆ ಆಳವಾದ ತಿಳುವಳಿಕೆ ಕೇವಲ ಉಪಯುಕ್ತವಲ್ಲ, ಆದರೆ ಅತ್ಯಗತ್ಯವಾಗುತ್ತದೆ. ಮ್ಯಾಜಿಕ್ ಹೊಸ, ಕಂಡುಹಿಡಿಯದ CSS ಗುಣಲಕ್ಷಣದಲ್ಲಿಲ್ಲ; ಅದು ಈಗಾಗಲೇ ನಮಗೆ ತಿಳಿದಿರುವ @keyframes ನಿಯಮದಲ್ಲಿ offset-distance ಗುಣಲಕ್ಷಣದ ಕಾರ್ಯತಂತ್ರದ ಕುಶಲತೆಯಲ್ಲಿದೆ.

ಪರಿಹಾರ: ಕೀಫ್ರೇಮ್‌ಗಳೊಂದಿಗೆ ಕಣಕಣ ನಿಯಂತ್ರಣ

ಪಥದ ಭಾಗದ ಅನಿಮೇಷನ್‌ನ ಕೀಲಿಯು @keyframes ಬ್ಲಾಕ್‌ನ ಒಳಗಿನ from ಮತ್ತು to (ಅಥವಾ 0% ಮತ್ತು 100%) ಗುರುತುಗಳು ಅನಿಮೇಷನ್‌ನ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ಸೂಚಿಸುತ್ತವೆ ಎಂದು ಅರಿತುಕೊಳ್ಳುವುದು, ಅಗತ್ಯವಾಗಿ ಅಲ್ಲ ಚಲನೆಯ ಪಥದ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತ್ಯವಲ್ಲ. ನಾವು ಈ ಗುರುತುಗಳಿಗೆ ಯಾವುದೇ offset-distance ಮೌಲ್ಯವನ್ನು ನಿಯೋಜಿಸಬಹುದು.

ತಂತ್ರ 1: ಮೂಲಭೂತ ವಿಭಾಗವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ನಮ್ಮ ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು ಅಳವಡಿಸೋಣ. ಡಾಟ್ ಅನ್ನು ಸಂಪೂರ್ಣ ಪಥದಲ್ಲಿ ಸರಿಸುವ ಬದಲು, ನಾವು ಅದನ್ನು ಮಧ್ಯದ ವಿಭಾಗದಲ್ಲಿ ಮಾತ್ರ ಚಲಿಸುವಂತೆ ಮಾಡುತ್ತೇವೆ, ನಿರ್ದಿಷ್ಟವಾಗಿ 25% ಗುರುತಿನಿಂದ 75% ಗುರುತಿಗೆ.

            
<!-- HTML is the same -->
<div class="scene">
  <div class="dot-segment"></div>
</div>

<style>
  /* .scene styles are the same */
  .scene {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 2em auto;
  }

  .dot-segment {
    width: 20px;
    height: 20px;
    background-color: crimson;
    border-radius: 50%;
    /* The same path as before */
    offset-path: path('M 20,100 C 50,20 250,20 280,100');
    
    /* Set initial position if needed */
    offset-distance: 25%;

    /* Animate with new keyframes */
    animation: move-along-segment 4s forwards;
  }

  @keyframes move-along-segment {
    from {
      offset-distance: 25%;
    }
    to {
      offset-distance: 75%;
    }
  }
</style>

            

              
                Copy
              
            
          

ನಿರ್ಣಾಯಕ ಬದಲಾವಣೆಗಳನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:

1. ಕೀಫ್ರೇಮ್‌ಗಳು: 0% ರಿಂದ 100% ವರೆಗೆ ಅನಿಮೇಟ್ ಮಾಡುವ ಬದಲು, move-along-segment ಕೀಫ್ರೇಮ್‌ಗಳು ಪ್ರಯಾಣದ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತ್ಯ ಬಿಂದುಗಳನ್ನು offset-distance: 25% ಮತ್ತು offset-distance: 75% ಎಂದು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ.
2. animation-fill-mode: forwards;: ಇದು ನಂಬಲಾಗದಷ್ಟು ಮುಖ್ಯವಾಗಿದೆ. ಅನಿಮೇಷನ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ, ಅಂಶವು ಅಂತಿಮ ಕೀಫ್ರೇಮ್‌ನ ಶೈಲಿಗಳನ್ನು (to ಅಥವಾ 100%) ಉಳಿಸಿಕೊಳ್ಳಬೇಕು ಎಂದು ಈ ಗುಣಲಕ್ಷಣವು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತದೆ. forwards ಇಲ್ಲದೆ, 4-ಸೆಕೆಂಡುಗಳ ಅನಿಮೇಷನ್ ಮುಗಿದ ನಂತರ, ಅನಿಮೇಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಡಾಟ್ ತನ್ನ ಆರಂಭಿಕ ಸ್ಥಿತಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ. ಅದನ್ನು ಬಳಸುವ ಮೂಲಕ, ಡಾಟ್ 25% ರಿಂದ 75% ವರೆಗೆ ಅನಿಮೇಟ್ ಆಗುತ್ತದೆ ಮತ್ತು ನಂತರ 75% ಗುರುತಿನಲ್ಲಿ ಉಳಿಯುತ್ತದೆ ಎಂದು ನಾವು ಖಚಿತಪಡಿಸುತ್ತೇವೆ.
3. ಆರಂಭಿಕ ಸ್ಥಿತಿ (ಐಚ್ಛಿಕ ಆದರೆ ಉತ್ತಮ ಅಭ್ಯಾಸ): offset-distance: 25%; ಅನ್ನು ನೇರವಾಗಿ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸುವುದರಿಂದ ಅನಿಮೇಷನ್ ಪ್ರಾರಂಭವಾಗುವ ಮೊದಲು ಅದು ಸರಿಯಾದ ಸ್ಥಾನದಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಈ ಸರಳ ಬದಲಾವಣೆಯೊಂದಿಗೆ, ನೀವು ಮೂಲಭೂತ ತಂತ್ರವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿದ್ದೀರಿ. ಅನಿಮೇಷನ್‌ನ ಒಟ್ಟು ಅವಧಿಯಾದ 4 ಸೆಕೆಂಡುಗಳನ್ನು ಈಗ ಪಥದ ಉದ್ದದ 50% ರಷ್ಟು (25% ರಿಂದ 75% ವರೆಗೆ) ಪ್ರಯಾಣಿಸಲು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ, ಇದು ಚಲನೆಯ ವ್ಯಾಪ್ತಿ ಮತ್ತು ವೇಗದ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.

ತಂತ್ರ 2: ಬಹು-ಹಂತದ ಪ್ರಯಾಣಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

ಈಗ ಹೆಚ್ಚು ಮುಂದುವರಿದ ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಸನ್ನಿವೇಶಕ್ಕಾಗಿ: ವಿರಾಮಗಳೊಂದಿಗೆ ಬಹು-ಹಂತದ ಅನಿಮೇಷನ್ ಅನ್ನು ರಚಿಸುವುದು. ಮಾರ್ಗದರ್ಶಿತ ಪ್ರವಾಸಗಳು, ಕಥೆ ಹೇಳುವಿಕೆ ಅಥವಾ ಹಂತ-ಹಂತದ ಸೂಚನೆಗಳಿಗೆ ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ. ಈ ಕೆಳಗಿನ ನೃತ್ಯ ಸಂಯೋಜನೆಯೊಂದಿಗೆ ಅನಿಮೇಷನ್ ಅನ್ನು ರಚಿಸೋಣ:

• ಹಂತ 1: ಪ್ರಾರಂಭದಿಂದ (0%) 40% ಗುರುತಿಗೆ ಸರಿಸಿ.
• ಹಂತ 2: 40% ಗುರುತಿನಲ್ಲಿ ಸ್ವಲ್ಪ ಸಮಯದವರೆಗೆ ವಿರಾಮಗೊಳಿಸಿ.
• ಹಂತ 3: 40% ಗುರುತಿನಿಂದ ಅಂತಿಮ 90% ಗುರುತಿಗೆ ಚಲಿಸುವುದನ್ನು ಮುಂದುವರಿಸಿ.

ಇದನ್ನು ಸಾಧಿಸಲು, ನಾವು ಕೀಫ್ರೇಮ್ ಶೇಕಡಾವಾರುಗಳನ್ನು ಬಳಸಿ ನಮ್ಮ ಕಥೆಯನ್ನು ಅನಿಮೇಷನ್‌ನ ಟೈಮ್‌ಲೈನ್‌ಗೆ ಮ್ಯಾಪ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ನಮ್ಮ ಒಟ್ಟು ಅನಿಮೇಷನ್ ಅವಧಿ 10 ಸೆಕೆಂಡುಗಳು ಎಂದು ಹೇಳೋಣ. ನಾವು ಸಮಯವನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಹಂಚಬಹುದು:

• ಮೊದಲ ಚಲನೆ (4s): ಅನಿಮೇಷನ್‌ನ ಟೈಮ್‌ಲೈನ್‌ನ ಮೊದಲ 40% ಅನ್ನು ಬಳಸಿ (0% ರಿಂದ 40% ಕೀಫ್ರೇಮ್‌ಗಳು).
• ವಿರಾಮ (2s): ಟೈಮ್‌ಲೈನ್‌ನ ಮುಂದಿನ 20% ಅನ್ನು ಬಳಸಿ (40% ರಿಂದ 60% ಕೀಫ್ರೇಮ್‌ಗಳು).
• ಎರಡನೇ ಚಲನೆ (4s): ಟೈಮ್‌ಲೈನ್‌ನ ಅಂತಿಮ 40% ಅನ್ನು ಬಳಸಿ (60% ರಿಂದ 100% ಕೀಫ್ರೇಮ್‌ಗಳು).

ಅದು ಕೋಡ್‌ಗೆ ಹೇಗೆ ಅನುವಾದಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

            
@keyframes multi-stage-journey {
  /* Stage 1: Move from 0% to 40% of the path */
  /* This happens during the first 40% of the animation's duration */
  0% {
    offset-distance: 0%;
  }
  40% {
    offset-distance: 40%;
  }

  /* Stage 2: Pause */
  /* Hold the position at 40% of the path */
  /* This happens between 40% and 60% of the animation's duration */
  60% {
    offset-distance: 40%;
  }

  /* Stage 3: Move from 40% to 90% of the path */
  /* This happens during the final 40% of the animation's duration */
  100% {
    offset-distance: 90%;
  }
}

.dot-multi-stage {
  /* ... other styles ... */
  animation: multi-stage-journey 10s forwards;
}

            

              
                Copy
              
            
          

ವಿರಾಮದ ಕೀಲಿಯು ಎರಡು ಪಕ್ಕದ ಕೀಫ್ರೇಮ್ ಗುರುತುಗಳನ್ನು (40% ಮತ್ತು 60%) ಹೊಂದಿರುವುದು ಅದೇ offset-distance ಮೌಲ್ಯದೊಂದಿಗೆ. ಅನಿಮೇಷನ್‌ನ ಟೈಮ್‌ಲೈನ್‌ನ 40% ಮತ್ತು 60% ಗುರುತಿನ ನಡುವಿನ ಸಮಯದಲ್ಲಿ, `offset-distance` ಬದಲಾಗುವುದಿಲ್ಲ, ಚಲನೆಯಲ್ಲಿ ಪರಿಪೂರ್ಣ ವಿರಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಈ ತಂತ್ರವು ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳ ವೇಗ ಮತ್ತು ಲಯದ ಮೇಲೆ ನಿರ್ದೇಶಕರ ಮಟ್ಟದ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.

ವೃತ್ತಿಪರ ವರ್ಕ್‌ಫ್ಲೋಗಳಿಗಾಗಿ ಸುಧಾರಿತ ತಂತ್ರಗಳು

ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಅದ್ಭುತವಾಗಿದೆ, ಆದರೆ ವೃತ್ತಿಪರ ಅಭಿವೃದ್ಧಿಗೆ ನಿರ್ವಹಿಸಬಹುದಾದ, ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಪರಿಹಾರಗಳು ಬೇಕಾಗುತ್ತವೆ. ಕೆಲವು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್ (ವೇರಿಯೇಬಲ್ಸ್) ಜೊತೆಗೆ ಡೈನಾಮಿಕ್ ಸೆಗ್ಮೆಂಟ್ಸ್

ನಿಮ್ಮ ಕೀಫ್ರೇಮ್‌ಗಳಲ್ಲಿ 25% ಮತ್ತು 75% ನಂತಹ ಹಾರ್ಡ್-ಕೋಡಿಂಗ್ ಮೌಲ್ಯಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಆದರೆ ಅದು ತುಂಬಾ ಹೊಂದಿಕೊಳ್ಳುವಂತಿಲ್ಲ. CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್ ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಅನಿಮೇಷನ್ ವಿಭಾಗಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು, ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ.

            
.element-dynamic {
  /* Define the segment endpoints as variables */
  --segment-start: 15%;
  --segment-end: 85%;

  offset-path: path('...');
  animation: move-dynamic-segment 5s forwards;
}

@keyframes move-dynamic-segment {
  from { 
    offset-distance: var(--segment-start);
  }
  to {
    offset-distance: var(--segment-end);
  }
}

            

              
                Copy
              
            
          

ಈ ವಿಧಾನವು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದೇ ಅನಿಮೇಷನ್ ಅನ್ನು ಬಳಸುವ ಬಹು ಅಂಶಗಳನ್ನು ಹೊಂದಿರಬಹುದು ಆದರೆ ವಿಭಿನ್ನ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತ್ಯ ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ. ಅಥವಾ, ನಕ್ಷೆಯಲ್ಲಿ ಪ್ರಯಾಣದ ವಿಭಿನ್ನ ಭಾಗಗಳನ್ನು ತೋರಿಸಲು ವಿಭಿನ್ನ ಬಟನ್‌ಗಳನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವಂತಹ ಬಳಕೆದಾರರ ಪರಸ್ಪರ ಕ್ರಿಯೆಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ --segment-start ಮತ್ತು --segment-end ಅನ್ನು ನವೀಕರಿಸಲು ನೀವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು.

animation-timing-function ನೊಂದಿಗೆ ಪ್ರತಿ-ವಿಭಾಗದ ಈಸಿಂಗ್

ಚಲನೆಯು ಕೇವಲ ಸ್ಥಾನದ ಬಗ್ಗೆ ಅಲ್ಲ; ಅದು ಪಾತ್ರದ ಬಗ್ಗೆ. ಈಸಿಂಗ್ (ಸಮಯದೊಂದಿಗೆ ನಿಯತಾಂಕದ ಬದಲಾವಣೆಯ ದರ) ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗೆ ವ್ಯಕ್ತಿತ್ವವನ್ನು ನೀಡುತ್ತದೆ. animation-timing-function ಆಸ್ತಿಯು ಸಂಪೂರ್ಣ ಅನಿಮೇಷನ್‌ಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ ಎಂಬುದು ಸಾಮಾನ್ಯ ತಪ್ಪು ಕಲ್ಪನೆ. ಆದಾಗ್ಯೂ, ಆ ಕೀಫ್ರೇಮ್‌ಗೆ ಕಾರಣವಾಗುವ ಪರಿವರ್ತನೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಲು ನೀವು ಅದನ್ನು ಕೀಫ್ರೇಮ್‌ನ ಒಳಗೆ ಘೋಷಿಸಬಹುದು.

ನಮ್ಮ ಬಹು-ಹಂತದ ಪ್ರಯಾಣವನ್ನು ಪರಿಷ್ಕರಿಸೋಣ. ಮೊದಲ ಚಲನೆಯು ವೇಗವರ್ಧನೆಗೊಳ್ಳಲು (ಈಸ್-ಇನ್), ವಿರಾಮವು ಸ್ಥಿರವಾಗಿರಲು ಮತ್ತು ಎರಡನೇ ಚಲನೆಯು ಸೌಮ್ಯವಾದ ನಿಲುಗಡೆಗೆ (ಈಸ್-ಔಟ್) ನಿಧಾನವಾಗಬೇಕು ಎಂದು ನಾವು ಬಯಸುತ್ತೇವೆ.

            
@keyframes multi-stage-eased-journey {
  0% {
    offset-distance: 0%;
    animation-timing-function: ease-in;
  }
  40% {
    offset-distance: 40%;
    /* This timing function applies to the pause */
    animation-timing-function: linear; 
  }
  60% {
    offset-distance: 40%;
    /* This timing function applies to the next movement */
    animation-timing-function: ease-out;
  }
  100% {
    offset-distance: 90%;
  }
}

            

              
                Copy
              
            
          

0%, 40% ಮತ್ತು 60% ಕೀಫ್ರೇಮ್‌ಗಳಲ್ಲಿ ಸಮಯ ಕಾರ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ, ನಾವು ಅನಿಮೇಷನ್‌ನ ಪ್ರತಿಯೊಂದು ವಿಭಿನ್ನ ಹಂತಕ್ಕೆ ಈಸಿಂಗ್ ಅನ್ನು ನಿರ್ದೇಶಿಸುತ್ತಿದ್ದೇವೆ: 0-40% ಚಲನೆ, 40-60% ವಿರಾಮ ಮತ್ತು 60-100% ಚಲನೆ. ಈ ಮಟ್ಟದ ನಿಯಂತ್ರಣವು ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ನೈಸರ್ಗಿಕ-ಭಾವನೆಯ ಚಲನೆಯನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಮೊದಲು: prefers-reduced-motion

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಹೊಂದಿರುವ ವೃತ್ತಿಪರರಾಗಿ, ಅಂತರ್ಗತ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸುವ ಜವಾಬ್ದಾರಿ ನಮ್ಮ ಮೇಲಿದೆ. ಕೆಲವು ಬಳಕೆದಾರರಿಗೆ, ವಿಶೇಷವಾಗಿ ವೆಸ್ಟಿಬುಲರ್ ಅಸ್ವಸ್ಥತೆಗಳನ್ನು ಹೊಂದಿರುವವರಿಗೆ, ದೊಡ್ಡ-ಪ್ರಮಾಣದ ಅನಿಮೇಷನ್‌ಗಳು ತಲೆತಿರುಗುವಿಕೆ, ವಾಕರಿಕೆ ಮತ್ತು ಇತರ ಗಂಭೀರ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. prefers-reduced-motion ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯೊಂದಿಗೆ ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳನ್ನು ಗೌರವಿಸಲು CSS ಸರಳ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಕಡಿಮೆ ಚಲನೆಯನ್ನು ವಿನಂತಿಸುವವರಿಗೆ ಪರ್ಯಾಯವನ್ನು ಒದಗಿಸುವ ರೀತಿಯಲ್ಲಿ ನಿಮ್ಮ ಚಲನಾ ಪಥದ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಯಾವಾಗಲೂ ಸುತ್ತಿಡಿ.

            
/* Apply the animation by default */
.animated-element {
  animation: my-motion-path-animation 5s forwards;
}

/* Override it for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    /* Optionally, you could replace it with a simple, non-distracting fade-in */
    /* opacity: 0; */
    /* animation: fade-in 1s forwards; */
  }
}

            

              
                Copy
              
            
          

ಈ ಸಣ್ಣ ಸೇರ್ಪಡೆಯು ನಿಮ್ಮ ಪ್ರೇಕ್ಷಕರಲ್ಲಿ ಗಮನಾರ್ಹ ಭಾಗಕ್ಕೆ ಜಗತ್ತಿನ ವ್ಯತ್ಯಾಸವನ್ನುಂಟು ಮಾಡುತ್ತದೆ. ಇದು ಆಧುನಿಕ, ಜವಾಬ್ದಾರಿಯುತ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಮಾತುಕತೆಗೆ ಬಾರದ ಭಾಗವಾಗಿದೆ.

ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಜಾಗತಿಕ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಸಿದ್ಧಾಂತವು ಮೌಲ್ಯಯುತವಾಗಿದೆ, ಆದರೆ ಈ ತಂತ್ರಗಳನ್ನು ಪ್ರಾಯೋಗಿಕ, ಅಂತರರಾಷ್ಟ್ರೀಯವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಸನ್ನಿವೇಶಗಳಿಗೆ ಸಂಪರ್ಕಿಸೋಣ.

ಇ-ಕಾಮರ್ಸ್: ಉತ್ಪನ್ನ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಹೈಲೈಟ್ ಮಾಡುವುದು

ಹೊಸ ಜಾಗತಿಕ ಸ್ಮಾರ್ಟ್‌ಫೋನ್‌ಗಾಗಿ ಉತ್ಪನ್ನ ಪುಟವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸ್ಥಿರ ಬುಲೆಟ್ ಪಾಯಿಂಟ್‌ಗಳ ಬದಲು, ನೀವು ಸಾಧನದ ಸಿಲೂಯೆಟ್ ಅನ್ನು ಗುರುತಿಸುವ offset-path ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ನಂತರ ಅನಿಮೇಟೆಡ್ ಹಾಟ್‌ಸ್ಪಾಟ್ ಪರದೆಯ ಅಂಚಿನಿಂದ (ಉದಾ., 10%-30%) ಚಲಿಸಬಹುದು, ಹೊಸ ಕ್ಯಾಮೆರಾ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ವಿರಾಮಗೊಳಿಸಬಹುದು (30% ನಲ್ಲಿ ಹಿಡಿದುಕೊಳ್ಳಿ) ಮತ್ತು ನಂತರ ಹೆಚ್ಚಿನ ವೇಗದ ಚಾರ್ಜಿಂಗ್ ಪೋರ್ಟ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಕರ್ವ್ ಉದ್ದಕ್ಕೂ ಮುಂದುವರಿಯಬಹುದು (40%-60%). ಇದು ಕ್ರಿಯಾತ್ಮಕ, ಆಕರ್ಷಕ ಮತ್ತು ತಿಳಿವಳಿಕೆಯುಳ್ಳ ಉತ್ಪನ್ನ ಪ್ರವಾಸವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಸಾರಿಗೆ ಮತ್ತು ಲಾಜಿಸ್ಟಿಕ್ಸ್: ಪ್ರಯಾಣವನ್ನು ದೃಶ್ಯೀಕರಿಸುವುದು

ಯಾವುದೇ ಅಂತರರಾಷ್ಟ್ರೀಯ ಶಿಪ್ಪಿಂಗ್ ಕಂಪನಿ, ಏರ್‌ಲೈನ್ ಅಥವಾ ಟ್ರಾವೆಲ್ ಬ್ಲಾಗ್‌ಗೆ ಮಾರ್ಗಗಳನ್ನು ದೃಶ್ಯೀಕರಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಪ್ರಪಂಚದ ನಕ್ಷೆಯ ಉದ್ದಕ್ಕೂ ವಿಮಾನ ಅಥವಾ ಹಡಗಿನ ಐಕಾನ್ ಅನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬಹುದು. ವಿಭಾಗದ ಅನಿಮೇಷನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು, ನೀವು ಟೋಕಿಯೊದಿಂದ ಸಿಂಗಾಪುರಕ್ಕೆ ವಿಮಾನವನ್ನು ತೋರಿಸಬಹುದು (ವಿಭಾಗ 1), ಅನಿಮೇಷನ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸುವ ಮೂಲಕ ಲೇಓವರ್ ಅನ್ನು ತೋರಿಸಬಹುದು ಮತ್ತು ನಂತರ ಸಿಡ್ನಿಗೆ ಸಂಪರ್ಕಿಸುವ ವಿಮಾನವನ್ನು ಅನಿಮೇಟ್ ಮಾಡಬಹುದು (ವಿಭಾಗ 2). ಇದು ಭಾಷೆಯ ತಡೆಗೋಡೆಗಳನ್ನು ಮೀರಿ ಸ್ಪಷ್ಟವಾದ, ದೃಶ್ಯ ಕಥೆ ಹೇಳುವಿಕೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್ ಪ್ರತಿಕ್ರಿಯೆ: ಬಳಕೆದಾರರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುವುದು

ಬಳಕೆದಾರರು ಕ್ರಿಯೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ, ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆ ಅತ್ಯಗತ್ಯ. ಬಳಕೆದಾರರು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿರುವ "ಉಳಿಸು" ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ ಎಂದು ಭಾವಿಸೋಣ. ಸಣ್ಣ ಚೆಕ್‌ಮಾರ್ಕ್ ಐಕಾನ್ ಬಟನ್‌ನಿಂದ ಸ್ಥಿತಿ ಸಂದೇಶ ಪ್ರದೇಶಕ್ಕೆ (ಉದಾ., "ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ ಉಳಿಸಲಾಗಿದೆ.") ಸೂಕ್ಷ್ಮವಾದ ಆರ್ಕ್ ಉದ್ದಕ್ಕೂ ಅನಿಮೇಟ್ ಆಗಬಹುದು. ಈ ವಿಭಾಗದ ಅನಿಮೇಷನ್ ಬಳಕೆದಾರರ ಕ್ರಿಯೆಯನ್ನು ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರತಿಕ್ರಿಯೆಗೆ ಸೊಗಸಾಗಿ ಸಂಪರ್ಕಿಸುತ್ತದೆ, ಬಳಕೆಯ ಸುಲಭತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಹೊಳಪುಳ್ಳ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಅಂತಿಮ ಆಲೋಚನೆಗಳು

CSS ಚಲನಾ ಪಥವು ಆಧುನಿಕ ವೆಬ್ ಮಾನದಂಡವಾಗಿದೆ. ಈ ಬರವಣಿಗೆಯ ಪ್ರಕಾರ, ಇದು Chrome, Firefox, Safari ಮತ್ತು Edge ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಪ್ರಮುಖ ಸದಾ ಹಸಿರು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ಜಾಗತಿಕ ಡೆವಲಪರ್ ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಗಳಲ್ಲಿ ಹಳೆಯ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, CanIUse.com ನಂತಹ ಸಂಪನ್ಮೂಲವನ್ನು ಸಂಪರ್ಕಿಸುವುದು ಯಾವಾಗಲೂ ವಿವೇಚನೆಯಿಂದ ಕೂಡಿರುತ್ತದೆ.

ಪಥದ ಭಾಗಗಳ ಉದ್ದಕ್ಕೂ ಅನಿಮೇಷನ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವ ಸಾಮರ್ಥ್ಯವು CSS ಚಲನಾ ಪಥದ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಒಂದು ನವೀನತೆಯಿಂದ ವೃತ್ತಿಪರ ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ಚಲನೆಯ ವಿನ್ಯಾಸಕರಿಗೆ ಅಗತ್ಯ ಸಾಧನವಾಗಿ ಏರಿಸುತ್ತದೆ. ಇದು ಬಾಹ್ಯ ಲೈಬ್ರರಿಗಳ ಓವರ್‌ಹೆಡ್ ಇಲ್ಲದೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಹಾರ್ಡ್‌ವೇರ್-ವೇಗವರ್ಧಿತ ಸಂಕೀರ್ಣ, ನೃತ್ಯ ಸಂಯೋಜನೆ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ

ನಾವು CSS ಚಲನಾ ಪಥದ ಮೂಲಭೂತ ಅಂಶಗಳಿಂದ ವಿಭಾಗದ ನಿಯಂತ್ರಣದ ಸೂಕ್ಷ್ಮ ಕಲೆಗೆ ಪ್ರಯಾಣಿಸಿದ್ದೇವೆ. CSS @keyframes ಒಳಗೆ offset-distance ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಅಂಶದ ಪ್ರಯಾಣದ ಮೇಲೆ ನಿಖರವಾದ ನಿಯಂತ್ರಣವನ್ನು ನೀವು ಪಡೆಯುತ್ತೀರಿ ಎಂಬುದು ಪ್ರಮುಖ ಪಾಠ. ನೀವು ಇನ್ನು ಮುಂದೆ ಸರಳವಾದ ಪ್ರಾರಂಭದಿಂದ ಕೊನೆಯವರೆಗೆ ಪ್ರವಾಸಕ್ಕೆ ಸೀಮಿತವಾಗಿಲ್ಲ.

ಮೂಲಭೂತ ವಿಭಾಗದ ಅನಿಮೇಷನ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ವಿರಾಮಗಳೊಂದಿಗೆ ಬಹು-ಹಂತದ ಪ್ರಯಾಣಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಮೂಲಕ ಮತ್ತು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ಪ್ರತಿ-ವಿಭಾಗದ ಈಸಿಂಗ್‌ನಂತಹ ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ, ಅಭಿವ್ಯಕ್ತಿಶೀಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಮತ್ತು prefers-reduced-motion ನೊಂದಿಗೆ ಯಾವಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಮುಂಚೂಣಿಯಲ್ಲಿರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಸುಂದರವಾದ ಸೃಷ್ಟಿಗಳು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಅಂತರ್ಗತ ಮತ್ತು ಗೌರವಯುತವಾಗಿರುತ್ತವೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೀರಿ.

ವೆಬ್ ಚಲನೆಗೆ ಒಂದು ಕ್ಯಾನ್ವಾಸ್ ಆಗಿದೆ. ಈಗ ನೀವು ಹೆಚ್ಚು ಬಹುಮುಖ ಮತ್ತು ಶಕ್ತಿಯುತ ಬ್ರಷ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಪ್ರಯೋಗ ಮಾಡಿ, ಅದ್ಭುತವಾದ ವಿಷಯಗಳನ್ನು ನಿರ್ಮಿಸಿ ಮತ್ತು CSS ನೊಂದಿಗೆ ಸಾಧ್ಯವಿರುವ ಎಲ್ಲೆಗಳನ್ನು ತಳ್ಳುವುದನ್ನು ಮುಂದುವರಿಸಿ.